<template>
  <page-header-wrapper>
    <a-card>
      <div class="table-page-search-wrapper">
        <a-form layout="inline" class="table-head-ground">
          <div class="table-layer">
            <a-form-item
              label=""
              class="table-head-layout"
              style="max-width: 350px; min-width: 300px"
            >
              <a-range-picker
                @change="onChange"
                :show-time="{ format: 'HH:mm:ss' }"
                format="YYYY-MM-DD HH:mm:ss"
                :disabled-date="disabledDate"
              >
                <template v-slot:suffixIcon>
                  <a-icon type="sync" />
                </template>
              </a-range-picker>
            </a-form-item>
            <jeepay-text-up
              :placeholder="'商户名称'"
              :msg="searchData.mchName"
              v-model:value="searchData.mchName"
            />
            <jeepay-text-up
              :placeholder="'应用AppId'"
              :msg="searchData.appId"
              v-model:value="searchData.appId"
            />
            <a-form-item label="" class="table-head-layout">
              <a-select
                v-model:value="searchData.type"
                placeholder="类型"
                default-value=""
              >
                <a-select-option value="">全部</a-select-option>
                <a-select-option value="0">进账</a-select-option>
                <a-select-option value="1">出账</a-select-option>
              </a-select>
            </a-form-item>
            <span
              class="table-page-search-submitButtons"
              style="flex-grow: 0; flex-shrink: 0"
            >
              <a-button
                type="primary"
                icon="search"
                @click="queryFunc"
                :loading="btnLoading"
              >查询</a-button
              >
              <a-button
                style="margin-left: 8px"
                v-if="$access('ENT_ACCOUNT_BILL_EXPORT')"
                type="primary"
                icon="export"
                @click="exportFile"
              >导出</a-button
              >
              <a-button
                style="margin-left: 8px"
                icon="reload"
                @click="() => (this.searchData = {})"
              >重置</a-button
              >
            </span>
          </div>
        </a-form>
      </div>

      <!-- 列表渲染 -->
      <JeepayTable
        @btnLoadClose="btnLoading = false"
        ref="infoTable"
        :initData="true"
        :reqTableDataFunc="reqTableDataFunc"
        :tableColumns="tableColumns"
        :searchData="searchData"
        rowKey="sourceOrderNo"
      >
        <template v-slot:appIdSlot="{ record }">
          <b>{{ record.appId }}</b>
        </template>
        <template v-slot:mchNoSlot="{ record }">
          {{ record.mchNo }}
        </template>
        <template v-slot:sourceOrderNoSlot="{ record }">
          {{ record.sourceOrderNo }}
        </template>
        <template v-slot:descriptionSlot="{ record }">
          {{ record.description }}
        </template>
        <template v-slot:amountSlot="{ record }">
          {{ (record.amount / 100).toFixed(2) }}
        </template>
        <template v-slot:balanceSlot="{ record }">
          {{ (record.balance / 100).toFixed(2) }}
        </template>
        <template v-slot:codeSlot="{ record }">
          {{ record.code }}
        </template>
        <template v-slot:typeSlot="{ record }">
          {{ record.type === 0 ? '进账' : '出账' }}
        </template>
      </JeepayTable>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import JeepayTable from '@/components/JeepayTable/JeepayTable'
import JeepayTextUp from '@/components/JeepayTextUp/JeepayTextUp' // 文字上移组件
import JeepayTableColumns from '@/components/JeepayTable/JeepayTableColumns'
import { API_URL_ACCOUNT_BILL, exportFile, req } from '@/api/manage'
import { download } from '@/utils/util'
import moment from 'moment/moment'

// eslint-disable-next-line no-unused-vars
const tableColumns = [
  {
    key: 'mchName',
    fixed: 'left',
    title: '商户名称',
    dataIndex: 'mchName',
    width: '110px'
  },
  {
    key: 'appId',
    width: '250px',
    title: '应用AppId',
    scopedSlots: { customRender: 'appIdSlot' }
  },
  {
    key: 'mchNo',
    width: '120px',
    title: '商户编号',
    scopedSlots: { customRender: 'mchNoSlot' }
  },
  {
    key: 'sourceOrderNo',
    width: '210px',
    title: '来源单号',
    scopedSlots: { customRender: 'sourceOrderNoSlot' }
  },
  {
    key: 'description',
    width: '120px',
    title: '说明',
    scopedSlots: { customRender: 'descriptionSlot' }
  },
  {
    key: 'amount',
    width: '80px',
    title: '变更金额',
    scopedSlots: { customRender: 'amountSlot' }
  },
  {
    key: 'balance',
    width: '80px',
    title: '最新余额',
    scopedSlots: { customRender: 'balanceSlot' }
  },
  {
    key: 'code',
    width: '200px',
    title: '编号',
    scopedSlots: { customRender: 'codeSlot' }
  },
  {
    key: 'type',
    title: '类型',
    scopedSlots: { customRender: 'typeSlot' },
    width: '60px'
  },
  {
    key: 'createdAt',
    dataIndex: 'createdAt',
    title: '创建时间',
    width: '200px'
  }
]

export default {
  name: 'AccountBillPage',
  components: { JeepayTable, JeepayTableColumns, JeepayTextUp },
  data () {
    return {
      btnLoading: false,
      tableColumns: tableColumns,
      searchData: {}
    }
  },
  methods: {
    queryFunc () {
      this.btnLoading = true
      this.$refs.infoTable.refTable(true)
    },
    // 请求table接口数据
    reqTableDataFunc: (params) => {
      return req.list(API_URL_ACCOUNT_BILL, params)
    },
    searchFunc: function () {
      // 点击【查询】按钮点击事件
      this.$refs.infoTable.refTable(true)
    },
    exportFile () {
      let queryParam = {}
      if (this.searchData.type === undefined || this.searchData.type === '') {
        queryParam = {
          createdStart: this.searchData.createdStart,
          createdEnd: this.searchData.createdEnd
        }
      } else {
        queryParam = {
          type: String(this.searchData.type),
          createdStart: this.searchData.createdStart,
          createdEnd: this.searchData.createdEnd
        }
      }
      exportFile(queryParam).then((res) => {
        const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
        const blobUrl = window.URL.createObjectURL(blob)
        download(blobUrl, '账户明细')
      })
    },
    onChange (date, dateString) {
      this.searchData.createdStart = dateString[0] // 开始时间
      this.searchData.createdEnd = dateString[1] // 结束时间
    },
    disabledDate (current) {
      // 今日之后日期不可选
      return current && current > moment().endOf('day')
    }
  }
}
</script>

<style lang="less" scoped></style>
